<!-- 查看已回答问卷页面 -->
<template>
  <!-- 导航栏 -->
  <uni-nav-bar class="nav-bar" leftIcon="left" @clickLeft="back" fixed="true" statusBar="true" :border="false">
    <div class="nav-bar-center">
      <div class="title ellipsis"> {{ showQuestionnaire?.title ?? '' }} </div>
    </div>
  </uni-nav-bar>
  <!-- 页面主体 -->
  <div class="container">
    <!-- 问卷头部 -->
    <div class="questionnaire-head">
      <!-- 问卷封面 -->
      <div class="head-cover">
        <image class="img" :src="fixQuestionnaireCover(showQuestionnaire?.coverImg)" mode="aspectFill" />
      </div>
      <!-- 问卷标题 -->
      <div class="head-title ellipsis">{{
        showQuestionnaire?.title ?? '' }} </div>
      <!-- 问卷描述 -->
      <div class="questionnaire-describe"> {{
        showQuestionnaire?.desc ?? '' }} </div>
    </div>
    <!-- 问卷内容 -->
    <div class="content">
      <!-- 不同的问题类型的区块 -->
      <div :class="questionList.questionCategory === identityQuestionCategoryName ? 'identity-block' : 'normal-block'"
        v-for="  (questionList, questionListIndex)   in   showQuestionnaire?.categoryQuestionList  "
        :key="questionList.id">

        <!-- 身份信息问题特有的结构 -->
        <div class="question" v-if="questionList.questionCategory === identityQuestionCategoryName">
          <text class="title">您的身份是？</text>
          <questionnaire-radio-group class="radio-group" v-model="questionList.questionList[0].options"
            disable></questionnaire-radio-group>
        </div>

        <!-- 一般问题特有的结构 -->
        <!-- 问题类别 -->
        <div class="question-type" v-if="isShowQuestionList(questionList)">
          问题类别：{{ questionList.questionCategory }}
        </div>
        <!-- 问题列表 -->
        <div class="question-list" v-if="isShowQuestionList(questionList)">
          <div class="question" v-for="(  question, questionIndex  ) in   questionList.questionList  " :key="question.id">
            <text class="question-title">Q{{ questionIndex + 1 }}: {{ question.title }}</text>
            <!-- 文本输入框 -->
            <textarea class="question-input" disabled :value="question.answer" auto-height />
          </div>
        </div>
      </div>
      <!-- 结束语 -->
      <div class="conclusion">
        {{ showQuestionnaire?.conclusion ?? '' }}
      </div>
      <!-- 提交按钮 -->
      <button class="submit-btn" disabled>
        提交
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import QuestionnaireRadioGroup from '@/components/questionnaire-radio-group.vue'
import { identityQuestionCategoryName } from '@/static/constants/questionnaire-constant';
import { onLoad } from '@dcloudio/uni-app';
import { reqGetTargetIdentityAnswer } from '@/api/api-questionnaire';
import { ref } from 'vue';
import { back } from '@/utils/navigate';
import { fixQuestionnaireCover } from '@/utils/others';

/** 当前显示的问卷 */
const showQuestionnaire = ref<Questionnaire>()

// 根据页面参数获取问卷
onLoad(async (options) => {
  const { questionnaireId, targetIdentity } = options!
  try {
    const res: any = await reqGetTargetIdentityAnswer(questionnaireId, targetIdentity)
    showQuestionnaire.value = JSON.parse(res.data.data.content_json)
    console.log('showQuestionnaire', showQuestionnaire.value);
  } catch (err) {
    console.error('reqGetTargetIdentityAnswer error', err)
  }
})

/**
 * 判断是否显示该问题列表，只有问题列表长度大于0时才返回true
 * @param questionList
 */
const isShowQuestionList = (questionList: CategoryQuestion) => {
  return questionList.questionCategory != identityQuestionCategoryName
    && questionList.questionList.length > 0
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/questionnaire.scss';

.container {
  display: grid;
  grid-template:
    'head' 78.2051vw
    'content' auto;

  position: relative;

  // 问卷头部
  .questionnaire-head {
    width: 100vw;
    background-color: #ffffff;

    padding: 16px;
    box-sizing: border-box;
    display: grid;
    grid-template:
      'cover' 37.9487vw
      '.' 16px
      'title' 8.7179vw
      '.' 8px
      'desc' 1fr;
    justify-items: center;

    // 头图
    .head-cover {
      grid-area: cover;
    }

    // 问卷标题
    .head-title {
      grid-area: title;
    }

    // 问卷描述
    .questionnaire-describe {
      grid-area: desc;
    }
  }

  // 问卷内容
  .content {
    grid-area: content;

    display: flex;
    flex-direction: column;
    align-items: center;

    // 身份问题区块
    .identity-block {
      margin-top: 8px;
      width: 100%;
      background-color: #fff;

      .question {
        width: 100%;
        height: 22.8205vw;

        box-sizing: border-box;
        padding: 16px;
        display: grid;
        grid-template:
          'title more' 5.3846vw
          'radio-group radio-group' 1fr
          / 1fr 4.6154vw;
        grid-row-gap: 12px;

        // 身份问题标题
        .title {
          grid-area: title;
          font-size: 3.8462vw;
        }

        .more-icon {
          grid-area: more;
          justify-self: end;
        }

        .radio-group {
          grid-area: radio-group;
        }
      }
    }
  }

  // 一般问题区块
  .normal-block {
    margin-top: 8px;
    width: 100%;

    // 问题类别
    .question-type {
      padding: 16px 0 8px 16px;
      font-size: 4.6154vw;
      color: #17ce92;
      background-color: #fff;
    }

    // 问题列表
    .question-list {
      width: 100%;
      display: grid;
      grid-auto-rows: minmax(20.2564vw auto);

      // 问题
      .question {
        box-sizing: border-box;
        background-color: #fff;


        padding: 8px 16px;
        display: grid;
        grid-template:
          'title more' auto
          'input input' minmax(8.7179vw, auto) / 1fr 46.15rpx;
        grid-row-gap: 8px;
        align-items: center;

        .question-title {
          grid-area: title;
          font-size: 28.85rpx;
          color: #ff5875;
        }

        .more-icon {
          align-self: self-start;
          grid-area: more;
          justify-self: end;
        }

        .question-input {
          grid-area: input;

          width: calc(100% - 24px);
          background-color: #f4ebf1;
          border-radius: 2px;

          padding: 8px 12px;
          font-size: 25rpx;
        }

        // 日期选择器
        .date-picker {
          grid-area: input;
          width: calc(100% - 24px);
          background-color: #f4ebf1;
          border-radius: 2px;

          padding: 8px 12px;
          font-size: 25rpx;

          .date {

            &.placeholder {
              color: #808080;
            }
          }

        }
      }
    }
  }
}

// 结束语
.conclusion {
  margin-top: 24px;
}

// 「提交」按钮
.submit-btn {
  width: 358px;
  height: 42px;
  border-radius: 4px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 16px;

  background: #17ce92;
  color: #ffffff;
}
</style>
